<template>
  <view class="page-container">
    <!-- 顶部消息通知 -->
    <view class="message-notice" @click="navigateTo('/pages/notice/list')">
      <uni-icons type="notification" size="18" color="#666"></uni-icons>
      <text class="notice-text">消息通知</text>
      <uni-icons type="right" size="14" color="#999"></uni-icons>
    </view>
    
    <!-- 广告轮播图 -->
    <banner :list="bannerList" />
    
    <!-- 通知公告 -->
    <notice-bar :notices="notices" />
    
    <!-- 产品分类菜单 -->
    <scroll-view class="category-scroll" scroll-x>
      <view 
        v-for="(item, index) in categories" 
        :key="index"
        class="category-item"
        :class="{active: currentCategory === index}"
        @click="changeCategory(index)"
      >
        {{item.name}}
      </view>
    </scroll-view>
    
    <!-- 产品推荐列表 -->
    <view class="section-title">
      <text class="title-text">产品推荐</text>
      <text class="more" @click="navigateTo('/pages/product/list')">更多 ></text>
    </view>
    
    <!-- 产品列表 - 一排两个 -->
    <product-list 
      :products="recommendProducts" 
      :cols="2" 
      @item-click="goToDetail"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import Banner from './components/Banner.vue'
import NoticeBar from './components/NoticeBar.vue'
import ProductList from './components/ProductList.vue'

// 数据状态
const bannerList = ref([
  { image: '/static/product.jpg', link: '' },
  { image: '/static/product2.jpg', link: '' }
])

const notices = ref([
  '系统将于今晚24:00进行维护升级',
  '新用户注册即送100元优惠券',
  '夏季大促活动火热进行中'
])

const categories = ref([
  { name: '推荐' },
  { name: '手机数码' },
  { name: '家用电器' },
  { name: '食品生鲜' },
  { name: '美妆个护' }
])

const currentCategory = ref(0)

const recommendProducts = ref([
  {
    id: 1,
    cover: '/static/product.jpg',
    name: '高端智能手机',
    desc: '旗舰配置 超长续航',
    price: 3999,
    sales: 1200
  },
  {
    id: 2,
    cover: '/static/product.jpg',
    name: '无线蓝牙耳机',
    desc: '高音质 降噪',
    price: 299,
    sales: 850
  },
  {
    id: 3,
    cover: '/static/product2.jpg',
    name: '无线蓝牙耳机',
    desc: '高音质 降噪',
    price: 2991,
    sales: 8501
  },
  {
    id: 4,
    cover: '/static/product2.jpg',
    name: '无线蓝牙耳机',
    desc: '高音质 降噪',
    price: 2992,
    sales: 2850
  },
  // 更多产品数据...
])

// 方法
const changeCategory = (index) => {
  currentCategory.value = index
  // 这里可以添加获取分类产品的逻辑
}

const goToDetail = (product) => {
  uni.navigateTo({
    url: `/pages/product/detail?id=${product.id}`
  })
}

const navigateTo = (url) => {
  uni.navigateTo({ url })
}

onLoad(() => {
  // 可以在这里添加数据加载逻辑
})
</script>

<style lang="scss">
.page-container {
  overflow-x: hidden;
  padding-bottom: 20rpx;
  background-color: $light-bg;
}

.message-notice {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: $white-bg;;
  font-size: 26rpx;
  color: $text-color;
  
  .notice-text {
    flex: 1;
    margin: 0 20rpx;
  }
}

.category-scroll {
  white-space: nowrap;
  padding: 20rpx 30rpx;
  background-color: $white-bg;;
  
  .category-item {
    display: inline-block;
    margin-right: 40rpx;
    padding: 10rpx 0;
    font-size: $font-size-28rpx;
    color: $text-color;
    
    &.active {
      color: $primary-color;
      border-bottom: 4rpx solid $primary-color;
    }
  }
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background-color: $white-bg;;
  margin-top: 20rpx;
  
  .title-text {
    font-size: $font-size-32rpx;
    font-weight: bold;
    color: $text-color;
  }
  
  .more {
    font-size: 26rpx;
    color: #999;
  }
}
</style>